<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>ECharts</title>
  <!-- 引入刚刚下载的 ECharts 文件 -->
  <script src="./lib/echarts.min.js"></script>
  <style>
    #main {
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM  图形绘制的尺寸 会根据 容器的大小改变 -->
  <div id="main" style="width: 600px;height:400px;"></div>

  <script type="text/javascript">
    /*
      核心步骤:
      1. 初始化 (根据需求传入不同的dom元素)
      2. 设置选项
      3. 基于选项渲染图表 (基本是固定的)
    */
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('#main'))

    // 指定图表的配置项和数据
    var option = {
      // 标题
      title: {
        // 文本
        text: '美食排行榜',
        // 样式
        textStyle: {
          color: 'yellowgreen',
          fontSize: 30
        },
        // 位置 left top bottom
        right: 0
      },
      // 提示框
      tooltip: {
        show: false // 默认是显示
      },
      // 图例 图形顶部的 选项
      legend: {
        data: ['热度'],
        bottom: 0,
        // 图例的样式
        itemStyle: {
          // 设置具体的颜色
          // color: 'orange'
          // 渐变色 可以设置颜色的渐变效果
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'red' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'yellow' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      },
      // 绘图网格 可以设置图形的位置等
      grid: {
        // 左侧的距离
        left: 100,
        // 顶部的距离
        top: '50%'
      },
      // x轴的设置
      xAxis: {
        data: ['西兰花', '西红柿', '西葫芦', '西北风', '西梅', '冬瓜'],
        // 文字大小
        axisLabel: {
          fontSize: 20
        }
      },
      // y轴的设置
      yAxis: {
        // y轴的线段
        axisLine: {
          // 显示
          show: true,
          // 线段的样式
          lineStyle: {
            // 颜色
            color: 'hotpink',
            // 粗细
            width: 20
          }
        }
      },
      // 图形的 类型 可以设置多个图
      series: [
        // 数据 名字 类型
        {
          name: '热度',
          type: 'bar', // 图的类型 bar 柱状图 pie 饼图
          data: [998, 200, 300, 400, 100, 520]
        }
        // {
        //   name: '热度',
        //   type: 'pie', // 图的类型 bar 柱状图 pie 饼图
        //   data: [998, 200, 300, 400, 100, 520]
        // }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  </script>
</body>

</html>